<template>
    <div id="app">
        <lb-header :backShow="false" :title="'篱笆闲聊'"></lb-header>
        <div class="con">
            <lb-item v-for="item in list" :key="item.id" 
                :nickname="item.nickname"
                :title="item.title"
                :con="item.con"
                :time="item.time"
            ></lb-item>
        </div>
        <button class="open" @click="dialogShow=true">添加</button>
        <lb-dialog v-show="dialogShow" @close="dialogShow=false"></lb-dialog>
    </div>
</template>

<script>
import lbHeader from './components/lb-header'
import lbItem from './components/lb-item'
import lbDialog from './components/lb-dialog'
export default {
    components:{
        lbHeader,
        lbItem,
        lbDialog
    },
    data(){
        return {
            list:[],
            dialogShow:false
        }
    },
    created(){
        this.$bus.$on('close',() => {
            this.dialogShow = false
        })
        this.$http('/api/data').then((res) => {
            if(res.data.code === 1){
                this.list = res.data.data;
            }
        }).catch((error) => {
            console.warn(error)
        })
    }
}
</script>

<style lang="scss">
@import './assets/common.css';

#app{
    width:100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .con{
        width: 100%;
        flex:1;
        background: pink;
        overflow: scroll;
    }
    .open{
        width:100%;
        height: 44px;
    }
}
</style>
